<template>
    <vue3-tinymce
        v-model="valueMiddleware"
        :setting="setting"
        script-src="/tinymce/tinymce.min.js"
    />
</template>

<script lang="ts" setup>
import { computed } from 'vue'
// @ts-ignore
import Vue3Tinymce from '@jsdawn/vue3-tinymce'

const emits = defineEmits(['update:value'])

export type TinymceEditorProps = {
    value?: string
    placeholder: string
    setting?: {
        language_url: string
        language: string
        width: string
        toolbar_sticky: boolean
        placeholder: string
        toolbar: string
        quickbars_selection_toolbar: string
        plugins: string
        font_size_formats: string
        link_default_target: string
        link_title: boolean
        nonbreaking_force_tab: boolean
        file_picker_types: string
    }
}

const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: ''
    }
})

const valueMiddleware = computed({
    get: () => props.value,
    set: (val) => emits('update:value', val)
})

// editor 配置项
const setting = {
    language_url: '/tinymce/langs/zh-Hans.js',
    language: 'zh-Hans',
    width: '100%',
    toolbar_sticky: true,
    placeholder: props.placeholder,

    toolbar:
        'preview code image media table |  fontsize forecolor backcolor | bold italic underline strikethrough| fullscreen | blocks alignleft aligncenter alignright alignjustify | link unlink | numlist bullist  | indent outdent | superscript subscript | removeformat |',
    quickbars_selection_toolbar:
        'removeformat | bold italic underline strikethrough | fontsize forecolor backcolor',
    plugins:
        'link image media table lists fullscreen quickbars code preview autoresize',
    font_size_formats: '12px 14px 16px 18px 20px 24px 28px 32px',
    link_default_target: '_blank',
    link_title: false,
    nonbreaking_force_tab: true,

    file_picker_types: 'image media' // file image media
    // images_upload_handler: function (blobInfo: any, process: any) {
    //     return new Promise((resolve, reject) => {
    //         customRequest(
    //             {
    //                 onSuccess: function (e) {
    //                     resolve(e)
    //                 },
    //                 onError: function (e: Error) {
    //                     reject(e.message)
    //                 },
    //                 fileItem: {
    //                     uid: blobInfo.id(),
    //                     status: 'init',
    //                     file: blobInfo.blob(),
    //                     url: blobInfo.blobUri(),
    //                     name: blobInfo.name()
    //                 },
    //                 onProgress: (e) => {
    //                     process(e)
    //                 }
    //             },
    //             'images'
    //         )
    //     })
    // },

    // file_picker_callback: function (callback: any) {
    //     //文件分类
    //     // const filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4'
    //     const filetype = '.mp4,.png,.jpg,.jpeg'

    //     //模拟出一个input用于添加本地文件
    //     const input = document.createElement('input')
    //     input.setAttribute('type', 'file')
    //     input.setAttribute('accept', filetype)
    //     input.click()

    //     input.onchange = function () {
    //         // @ts-ignore
    //         const file = this.files[0]
    //         const fileItem: FileItem = {
    //             uid: file.lastModified,
    //             status: 'init',
    //             file,
    //             name: file.name
    //         }

    //         adminGlobalStore.setSpin(true, '上传中...')
    //         customRequest(
    //             {
    //                 onSuccess: function (e) {
    //                     adminGlobalStore.setSpin(false)
    //                     callback(e)
    //                 },
    //                 onError: function (e: Error) {
    //                     adminGlobalStore.setSpin(false)
    //                     Message.error(e.message)
    //                 },
    //                 fileItem,
    //                 onProgress: (e) => {
    //                     adminGlobalStore.setSpin(true, '上传中 ' + e + '% ...')
    //                 }
    //             },
    //             'videos'
    //         )
    //     }
    // }
}
</script>
